<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我想你了呀</title>
    <style>
        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "微软雅黑", "Heiti SC", sans-serif;
        }
        body {
            background: transparent;
            overflow: hidden; /* 隐藏滚动条 */
        }

        /* 问候窗口样式 */
        .first-win {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 280px;
            height: 120px;
            background-color: #f0f8ff;
            border-radius: 8px;
            padding: 5px;
            opacity: 0; /* 初始透明 */
            transition: opacity 0.5s ease; /* 淡入淡出动画 */
            z-index: 9999; /* 置顶 */
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        .first-frame {
            width: 100%;
            height: 100%;
            background-color: #fff0f5;
            border: 3px solid #ffccd5;
            border-radius: 4px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 10px;
        }
        .first-text {
            font-size: 16px;
            font-weight: bold;
            color: #d85c8a;
            margin-bottom: 10px;
        }
        .love-btn {
            padding: 6px 24px;
            background-color: #ffccd5;
            color: #a62639;
            border: none;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .love-btn:hover {
            background-color: #ffb3c1;
        }

        /* 提示弹框样式 */
        .tip-window {
            position: fixed;
            width: 200px;
            height: 50px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: #333;
            z-index: 9998; /* 比问候窗低一层 */
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            animation: pop 0.3s ease; /* 弹出动画 */
        }
        @keyframes pop {
            0% { transform: scale(0.8); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
        }
    </style>
</head>
<body>
    <!-- 问候窗口 -->
    <div class="first-win" id="firstWin">
        <div class="first-frame">
            <div class="first-text">Hi，有点想你了！</div>
            <button class="love-btn" id="loveBtn">我也想你了</button>
        </div>
    </div>

    <script>
        // 提示文字列表
        const tipTextList = [
            "多喝水哦~", "保持微笑呀", "元气满满", "记得吃水果", "保持好心情",
            "好好爱自己", "我想你了", "偷个小懒", "期待见面", "天冷加衣",
            "顺顺利利", "早点休息", "烦恼消失", "别熬夜", "你超棒",
            "别焦虑", "加油", "你很特别", "会好的", "要自信"
        ];
        // 提示框背景色列表
        const tipBgColors = [
            'skyblue', 'lightgreen', 'lavender', 'lightyellow', 'plum',
            'coral', 'bisque', 'aquamarine'
        ];
        // 配置参数（适配手机）
        const TIP_COUNT = 80; // 弹窗总数
        const TIP_INTERVAL = 60; // 弹窗间隔（毫秒）

        // 页面加载完成后执行
        window.onload = function() {
            const firstWin = document.getElementById('firstWin');
            const loveBtn = document.getElementById('loveBtn');

            // 问候窗淡入
            setTimeout(() => {
                firstWin.style.opacity = 1;
            }, 100);

            // 点击按钮后执行
            loveBtn.addEventListener('click', function() {
                // 问候窗淡出
                firstWin.style.opacity = 0;
                setTimeout(() => {
                    firstWin.style.display = 'none';
                    // 开始弹出提示框
                    startTipWindows();
                }, 500);
            });
        };

        // 生成随机提示框
        function startTipWindows() {
            let count = 0;
            const screenWidth = window.innerWidth;
            const screenHeight = window.innerHeight;
            const tipWidth = 200;
            const tipHeight = 50;

            // 定时生成弹框
            const timer = setInterval(() => {
                if (count >= TIP_COUNT) {
                    clearInterval(timer);
                    return;
                }

                // 创建提示框元素
                const tipWindow = document.createElement('div');
                tipWindow.className = 'tip-window';

                // 随机位置（确保不超出屏幕）
                const x = Math.floor(Math.random() * (screenWidth - tipWidth));
                const y = Math.floor(Math.random() * (screenHeight - tipHeight));
                tipWindow.style.left = `${x}px`;
                tipWindow.style.top = `${y}px`;

                // 随机文字和背景色
                const tipText = tipTextList[Math.floor(Math.random() * tipTextList.length)];
                const bgColor = tipBgColors[Math.floor(Math.random() * tipBgColors.length)];
                tipWindow.textContent = tipText;
                tipWindow.style.backgroundColor = bgColor;

                // 添加到页面
                document.body.appendChild(tipWindow);

                count++;
            }, TIP_INTERVAL);
        }
    </script>
</body>
</html>